import React, { Component, PropTypes } from 'react'
import { fetchPost } from './../request'
import { Table, Card, Button, Form, Upload, message, Modal, Select, Input, Icon, Checkbox, Popconfirm } from 'antd'
import {origin} from '../../../../utils/config'
import {origin_promotion} from '../../../../utils/config'
import Filter from './Filter.jsx'

const FormItem = Form.Item
const Option = Select.Option
const CheckBoxGroup = Checkbox.Group

class List extends React.Component {
  constructor (props) {
    super(props)
    this.changeIsLoading = this.changeIsLoading.bind(this)
    this.getSearchData = this.getSearchData.bind(this)

    this.state = {
      data: [],
      isLoading: true,
      params: {
        pushLocalType: '0',
        userType: '1'
      },
      visible: false,
      paramsCache: null,
      page: {
        currentPage: 1,
        pageSize: 10
      }
    }

  }

  componentDidMount () {
    this.getData()
  }

  getData () {
    let postParams = {};
    let appType = window.sessionStorage.getItem('appCode')
    if(this.state.paramsCache != null) {
      postParams = this.state.paramsCache;
      postParams.currentPage = this.state.page.currentPage;
      this.getSearchData(postParams);
    }
    else {
      postParams.pageSize = this.state.page.pageSize;
      postParams.currentPage = this.state.page.currentPage;
      fetchPost(`/grantcoupon/grantresultlist`, postParams,origin_promotion).then(json => {
        if (json.data && json.code === 0) {
          let data = json.data.itemList
          this.state.page = json.data.page;
          this.setState({
            data: data
          })
        }
      })
    }
  }
  getSearchData (params) {
    this.state.paramsCache = params;
    // fetchPost(`/grantcoupon/queryByParams`,params,origin_promotion).then(json => {
    //   if (json.data && json.code === 0) {
    //     let data = json.data.itemList
    //     this.state.page = json.data.page;
    //     this.setState({
    //       data: data
    //     })
    //   }
    // })
  }

  changeIsLoading () {
    let a = !this.state.isLoading
    this.setState({
      isLoading: a
    })
  }
  nextPage (currentPage) {
    this.setState({
      page: {
        ...this.state.page,
        currentPage,
      }
    }, () => {
      this.getData()
    })
  }
  handleReset () {
    this.props.form.resetFields()
    this.setState({
      data: [],
      visible: false,
      params: {
        pushLocalType: '0',
        userType: '1'
      },
      page: {
        currentPage: 1,
        pageSize: 10
      }
    }, () => {
      this.getData()
    })
  }

  render () {
    let self = this

    const columns = [
      {
        title: '发放Id',
        dataIndex: 'grantId',
        key: 'grantId'
      }, {
        title: '用户code',
        dataIndex: 'userCode',
        key: 'userCode',
      }, {
        title: '奖券Id',
        dataIndex: 'couponId',
        key: 'couponId'
      }, {
        title: '发放总数',
        dataIndex: 'totalNum',
        key: 'totalNum'
      }, {
        title: '发放成功数量',
        dataIndex: 'successNum',
        key: 'successNum'
      }, {
        title: '相关操作',
        dataIndex: '',
        key: '',
        render: (text, record) => {
          return (
            <div style={{display:'flex',flexDirection: 'row',justifyContent: 'center'}}>
              <Popconfirm title={`是否确认已补发`} onConfirm={() => {this.passVerify(record)}}>
                <a  style={{ margin : 5, color: '#87CEEB' }}>已补发</a>
              </Popconfirm>
            </div>
          )
        }
      }
    ]

    let {getFieldDecorator} = this.props.form
    const formItemLayout = {
      labelCol: {span: 5},
      wrapperCol: {span: 10},
    }

    const pagination = {
      total: self.state.page.totalCount,
      pageSize: self.state.page.pageSize,
      showSizeChanger: false,
      showQuickJumper: true,
      showTotal (total) {
        return `Total ${total} `
      },
      onChange (current) {
        self.nextPage(current)
      }
    }
    return (
      <div>
        <Modal
          visible={this.state.visible}
          onCancel={() => {
            this.handleReset()
          }}
          footer={null}
        >
        </Modal>
        <Card>
          <Filter changeIsLoading={this.changeIsLoading} getSearchData={this.getSearchData} getData={this.getData} />

          <Table pagination={pagination} rowKey='grantDetailId' size="small" key='grantDetailId' columns={columns} dataSource={self.state.data}
                 bordered
          >
          </Table>
        </Card>
      </div>
    )
  }
  passVerify(record) {
    fetchPost(`/grantcoupon/${record.grantDetailId}/delete`,null, origin_promotion).then((res) => {
      if(res.code === 0) {
        this.getData();
      }
    })
  }
}

List = Form.create()(List)
export default List


